<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>



		</style>
	</head>
	<body>

		<!-- 视图 -->


		<div id="app">
			<!-- <p style="height: 500px;border: solid 1px black;"  onclick="alert(111)">段落</p> -->
			<!-- <p style="height: 500px;border: solid 1px black;"  v-on:click="click1">段落</p> -->

			<button v-on:click="counter += 1">Add {{counter}}</button>
			
			
			
			<p style="height: 200px;border: solid 1px black;" @click="click1($event)">段落</p>




		</div>



		<!-- 把 vuejs管理的数据跟 视图进行双向绑定-->
		<script>
			let vm = new Vue({
				el: "#app",
				data: {
					counter: 0

				},
				methods: {
					click1: function(event) {
						console.log("p标签被点击....")
						console.log(event);
					}
				}
			})
		</script>



	</body>
</html>
